import { FC, useCallback, useState } from "react";
import { observer } from "mobx-react";
import { useDropzone } from "react-dropzone";
import { UploadCloud } from "lucide-react";
// hooks
import { MAX_FILE_SIZE } from "@/constants/common";
import { generateFileName } from "@/helpers/attachment.helper";
import { useInstance, useIssueDetail } from "@/hooks/store";
// components
import { IssueAttachmentsListItem } from "./attachment-list-item";
// types
import { TAttachmentOperations } from "./root";

type TAttachmentOperationsRemoveModal = Exclude<TAttachmentOperations, "create">;

type TIssueAttachmentItemList = {
  workspaceSlug: string;
  issueId: string;
  handleAttachmentOperations: TAttachmentOperationsRemoveModal;
  disabled?: boolean;
};

export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((props) => {
  const { workspaceSlug, issueId, handleAttachmentOperations, disabled } = props;
  const [isLoading, setIsLoading] = useState(false);

  // store hooks
  const { config } = useInstance();
  const {
    attachment: { getAttachmentsByIssueId },
  } = useIssueDetail();
  // derived values
  const issueAttachments = getAttachmentsByIssueId(issueId);

  const onDrop = useCallback(
    (acceptedFiles: File[]) => {
      const currentFile: File = acceptedFiles[0];
      if (!currentFile || !workspaceSlug) return;

      const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), {
        type: currentFile.type,
      });
      const formData = new FormData();
      formData.append("asset", uploadedFile);
      formData.append(
        "attributes",
        JSON.stringify({
          name: uploadedFile.name,
          size: uploadedFile.size,
        })
      );
      setIsLoading(true);
      handleAttachmentOperations.create(formData).finally(() => setIsLoading(false));
    },
    [handleAttachmentOperations, workspaceSlug]
  );

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    maxSize: config?.file_size_limit ?? MAX_FILE_SIZE,
    multiple: false,
    disabled: isLoading || disabled,
  });

  if (!issueAttachments) return <></>;

  return (
    <div
      {...getRootProps()}
      className={`relative flex flex-col ${isDragActive && issueAttachments.length < 3 ? "min-h-[200px]" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
    >
      <input {...getInputProps()} />
      {isDragActive && (
        <div className="absolute flex items-center justify-center left-0 top-0 h-full w-full bg-custom-background-90/75 z-30 ">
          <div className="flex items-center justify-center p-1 rounded-md bg-custom-background-100">
            <div className="flex flex-col justify-center items-center px-5 py-6 rounded-md border border-dashed border-custom-border-300">
              <UploadCloud className="size-7" />
              <span className="text-sm text-custom-text-300">Drag and drop anywhere to upload</span>
            </div>
          </div>
        </div>
      )}
      {issueAttachments?.map((attachmentId) => (
        <IssueAttachmentsListItem
          key={attachmentId}
          attachmentId={attachmentId}
          disabled={disabled}
          handleAttachmentOperations={handleAttachmentOperations}
        />
      ))}
    </div>
  );
});
